<template>
  <div>
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRule"
      label-width="80px"
      @keyup.enter.native="dataFormSubmit()"
    >
      <el-form-item label="上级单位" prop="parentName">
        <el-cascader
          v-model="dataForm.parentId"
          :options="options"
          :props="{ checkStrictly: true, emitPath: false }"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="单位名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="部门名称" />
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input-number
          v-model="dataForm.orderNum"
          controls-position="right"
          :min="0"
          placeholder="排序"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: false,
      dataForm: {
        deptId: 0,
        parentId: "",
        parentName: "",
        name: "",
        orderNum: ""
      },
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            }
          ]
        }
      ],
      dataRule: {
        // parentName: [
        //   { required: true, message: '上级单位不能为空', trigger: 'change' }
        // ],
        name: [
          { required: true, message: "单位名称不能为空", trigger: "blur" }
        ],
        orderNum: [{ required: true, message: "排序不能为空", trigger: "blur" }]
      },
      deptList: [],
      deptListTreeProps: {
        label: "name",
        children: "children"
      },
      defaultProps: {
        parent: "parentId", // 父级唯一标识
        value: "deptId", // 唯一标识
        label: "name",
        children: "children"
      }
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },
    // 菜单树选中
    deptListTreeCurrentChangeHandle(data, node) {
      this.dataForm.parentId = data.deptId;
      this.dataForm.parentName = data.name;
    },
    // 菜单树设置当前选中节点
    deptListTreeSetCurrentNode() {
      this.$refs.deptListTree.setCurrentKey(this.dataForm.parentId);
      this.dataForm.parentName = (this.$refs.deptListTree.getCurrentNode() ||
        {})["name"];
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer::v-deep {
  text-align: center;
  .el-button {
    margin-left: 0.5rem;
  }
}
</style>
